/* 基础样式重置
 *{} 在CSS里面是通用选择器，用于选中页面中的所有HTML元素
   常用于CSS重置，统一浏览器默认样式*/
* {
    /*
       这里说一下Padding(填充) 和 Margin (外边距)的区别
       特性           Padding                         Margin
       位置       内容与边框之间               边框与其他元素之间
       背景       受背景影响                    透明，不受背景影响
       折叠       不会折叠                      垂直方向会折叠
       负值       通常不支持                    支持负值

       在Padding(填充) 和 Margin (外边距) 之间是 border(边框)
       outline(轮廓)是位于元素周围(border边框)的一条线，位于边框边缘的外围，可起到突出元素的作用

       最终元素的总宽度计算公式是这样的：
       总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
       元素的总高度最终计算公式是这样的：
       总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
    */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*
    box-sizing 属性 这个属性决定了如何计算元素的总宽度和总高度
    它有两个主要的值:
    1. content-box (默认值)
       宽度和高度只包含内容区域(就宽度而言就是下面的 width)
       增加内边距(padding)和边框(border)会增加元素的总尺寸
       公式: 总宽度=width + Padding-Left + Padding-Right + Border-Left + Border-Right

    2.border-box
       宽度和高度包含内容，内边距和边框
       增加内边距(padding)和边框(border)不会增加元素的总尺寸，而是压缩内容区域
       公式: 总宽度=width( 内容+ Padding-Left + Padding-Right + Border-Left + Border-Right )
*/

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*溢出控制:隐藏body元素的滚动条和溢出内容*/
    overflow: hidden;
    /*
        创建一个线性渐变，你必须至少定义两种颜色节点
        颜色节点即你想要呈现平稳过渡的颜色
        同时，你也可以设置一个起点和一个方向（或一个角度）
     */
    background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* 主容器 */
.container {
    /*
        将元素设为flex弹性布局容器，内部子元素成为flex项目

        css的display属性用于控制HTML元素在页面上的布局方式，决定元素如何生成和排列其内容
          其主要属性值及作用：
            block:(块级元素)
                元素独占一行，宽度默认填满父容器
                可以设置宽度，高度，内外边距
                参见元素: <div> <p> <h1>-<h6>
            inline:(行类元素)
                元素在一行内排列，宽度由内容决定
                无法设定宽度，高度和上下边距
                常见元素: <span> <a> <strong>
            inline-block(行内块元素)
                兼具行内和块级特性
                在一行内排列，但可以设置宽度，高度和边距
                适合制作导航菜单等需要水平排列的组件
            none(隐藏元素)
                元素完全从文档流中移除，不占据任何空间
                与visibility:hidden的区别在于后者仍保留空间
            flex(弹性布局)
                一维布局模型，提供更高效的容器内项目对齐和分布
                适合构建响应式布局和复杂组件
                (并且子元素不会继承父元素的flex属性)
            grid(网格布局)
                二维布局系统，可同时控制行和列
                适合构建整体页面布局和复杂网格结构

            后两者已经成为主流布局方式

            实际应用:
                将链接转换为按钮: a {dispaly: inline-block; padding: 10px 20px}
                创建水平导航：nav li { display: inline-block; }
                隐藏移动端元素：.mobile-menu { display: none; }
    */
    display: flex;
    /*设置容器宽度为视口宽度的100% vw 就是viewport width的意思  浏览器窗口可视区域宽度的 100%*/
    width: 100vw;
    /*设置容器高度为视口高度的100% vh 就是viewport width的意思  浏览器窗口可视区域高度的 100%*/
    height: 100vh;
}

/* 左侧区域 - 75%宽度 */
.left-section {
    width: 75vw;
    height: 100vh;
    /*
        CSS 的 position 属性是网页布局中一个非常核心和强大的工具，它用于控制元素在页面上的定位方式
        简单来说，position 属性决定了元素在文档流中的位置，以及它如何与其他元素相互作用
        核心属性值详解:
            static (静态定位):
                默认值‌。元素按照正常的文档流进行排列
                使用 top, right, bottom, left, z-index 属性对它‌无效
            relative (相对定位)
                元素‌相对于其原本在正常文档流中的位置‌进行偏移。
                它原本占据的空间会被保留，不会影响其他元素的位置
                通常与 top, right, bottom, left 一起使用
            absolute (绝对定位)
                元素‌相对于最近一个非 static 定位的祖先元素(可以理解为父元素)‌进行定位
                如果找不到这样的祖先元素，则会相对于 <html> 根元素（即整个页面  就是html这个元素）进行定位
                元素会‌脱离正常的文档流‌，不再占据空间，其他元素会当它不存在一样排列
            fixed (固定定位)
                元素‌相对于浏览器窗口‌进行定位。
                即使页面滚动，它也‌始终固定在屏幕的同一个位置‌。
                同样会脱离正常的文档流。
            sticky (粘性定位)
                是relative 和 fixed 的结合
                元素在跨越特定阈值前是相对定位，之后变为固定定位（例如“固定”在屏幕顶部）
                必须指定 top, right, bottom, left 中的一个值，粘性定位才会生效
    */
    position: relative;
    /*溢出控制:隐藏溢出内容*/
    overflow: hidden;
}

/* 右侧区域 - 25%宽度 */
.right-section {
    width: 25vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* 图片包装器 */
.image-wrapper {

    /*
        width、height 和 position 属性的表现，在很大程度上取决于其父元素
            核心关系概述
        width 和 height‌：决定了元素自身的尺寸，但其计算基准（百分比值参考谁）受父元素影响
        position‌：决定了元素在文档流中的定位方式，其定位基准点（top, left等属性参考谁）也由父元素决定

        下面我们分点详细解释：
        1. width 和 height 与父元素的关系
        这两个属性的百分比值（%）是相对于其‌包含块‌的尺寸计算的。在大多数情况下，包含块就是父元素的内容区(切记这个是内容，因为除了内容还有内边距等一些,东西)
            width: 50%;‌：  元素的宽度为父元素内容区宽度的50%。
            height: 50%;‌： 元素的高度为父元素内容区高度的50%。
          ‌特殊情况：
                如果父元素的高度是 auto（未显式设置），那么子元素的 height: 50%; 会无效，结果为0。因为父元素的高度由子元素撑开，形成了一个循环依赖
    */
    width: 100%;
    height: 100%;
    position: relative;
}

.main-image {
    width: 100%;
    height: 100%;
    /*
        CSS 的 object-fit 属性用于控制替换元素（如 <img>、video 等）的内容如何适应其容器的尺寸，避免内容变形或留白
            作用‌：控制替换元素内容在容器中的缩放和显示方式，保持原始比例或填充容器‌
            适用元素‌：<img>、video、picture 等替换元素‌

        属性值详解:
            属性值	                    效果描述	                                            类比说明
           fill                     拉伸/压缩填满容器，可能变形                              硬塞照片进画框
           contain                  保持比例缩放，完整显示内容，容器可能留白                    照片完整显示，四周留空
           cover                    保持比例缩放至填满容器，可能裁剪部分内容                    裁切照片边角填满画框
           none                     不缩放，按原始大小显示，超出容器不裁剪                      原图直接显示，超出部分忽略
           scale-down               取 none 或 contain 中较小的尺寸                         图小时原样显示，大时缩小适配

        典型应用场景
              contain‌：需完整展示内容（如产品图库）‌
              cover‌：需填满容器且允许裁剪（如背景图）‌
              fill‌：不介意变形时使用（较少推荐）‌
        object-position 可调整内容在容器内的位置（如居中、顶部等），与 object-fit 组合实现更精细布局‌
    */
    object-fit: cover;
    /*
       CSS transition 属性用于为元素的状态变化（如悬停、焦点变化等）添加平滑的动画过渡效果，使属性变化更自然流畅‌(否者就很突兀)
    */
    transition: all 0.4s ease;
    /*
        CSS filter 属性是用于对元素（如图片、文本、视频等）应用图形效果的强大工具，通过调整模糊、颜色、阴影等参数实现视觉优化‌
    */
    filter: blur(0px);
}

/* 图片信息显示 */
.image-info {
    /*
        在CSS中，bottom、left、right和top是用于定位元素的属性，
        它们通常与position属性一起使用，控制元素相对于其定位上下文的位置。
        定位属性功能‌：
            top：控制元素上边缘的位置   比如top:0 那么就表示紧挨着顶部 其它以次类推
            right：控制元素右边缘的位置
            bottom：控制元素下边缘的位置
            left：控制元素左边缘的位置
    */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    /*
        下面的padding涵盖了上下左右
    */
    padding: 30px 25px 25px;

    /*
        CSS pointer-events 属性用于控制元素是否能够响应鼠标、触摸等指针事件该属性通过不同的取值来决定元素对指针事件的响应行为
            ‌基本取值与效果
                pointer-events 的常用取值包括 auto 和 none
                设置为 none 时，元素会完全忽略指针操作，鼠标事件会"穿透"该元素直接作用于下方的元素
                此时，元素上的悬停效果（如 :hover）和点击事件（如 click）均不会触发
                而 auto 则恢复浏览器默认的交互行为
            穿透机制与继承性
                该属性支持继承若父元素设置了 pointer-events: none，其子元素未单独设置时也会继承此值
                导致整个区域均不响应指针事件当点击这类元素时，事件会穿透到其底层重叠的元素上
                需要注意的是，它(就是当pointer-events:取值为none时)仅禁用指针触发的事件，通过键盘或其他方式绑定的事件仍可能执行
    */
    pointer-events: none;
}

.image-title {
    font-size: 2.2rem;
    /*
        除了margin-bottom还有
        margin-top:     上外边距
        margin-right :  右外边距
        margin-left:    左外边距
    */
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.image-desc {
    font-size: 1.3rem;
    opacity: 0.9;
    line-height: 1.5;
}

/* 控制面板 */
.control-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    background: rgba(255, 255, 255, 0.95);
    /*
        backdrop-filter 和 filter 的区别

        特性	            backdrop-filter	                            filter
        作用对象            元素背后的内容                             元素自身及子元素
        典型应用	        模糊背景、动态背景效果	                   图像处理、UI 元素特效
        兼容性	            部分旧浏览器需前缀	                        现代浏览器广泛支持
    */
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    /*
        CSS z-index 属性用于控制元素的堆叠顺序，决定元素在垂直于屏幕方向上的显示层级
        仅对‌定位元素‌生效（position: relative/absolute/fixed/sticky）
        数值越大，元素越靠前显示
        默认值为 auto（继承父级或按文档流顺序）

        每个定位元素创建独立的堆叠上下文
        子元素的 z-index 只在父上下文内比较
        根元素（<html>）是最外层的堆叠上下文
    */
    z-index: 1000;
}

.panel-header {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: flex;
    /*
        align-items 是 CSS Flexbox 布局中的一个属性，用于控制 flex 容器内所有子元素在‌交叉轴‌（默认垂直方向）上的对齐方式‌
        作用对象
            必须作用于 flex 容器‌（父元素设置 display: flex 或 inline-flex）‌
            影响容器的‌所有直接子元素‌（flex 项目）‌

            flex容器(就是flex父元素)，flex项目（就是flex子元素)

         ‌属性值

            值	                        效果	                                     适用场景
           stretch	            默认值，子元素拉伸填满容器高度	                    需要子元素等高时‌
           center	            子元素垂直居中()	                                导航栏、卡片垂直居中‌
           flex-start	        子元素顶部对齐	                                    列表项靠上对齐‌
           flex-end	            子元素底部对齐	                                    底部对齐的按钮组‌
           baseline	            按文本基线对齐	                                    多行文本对齐‌

        与 align-content 的区别
            align-items：控制单行子元素的对齐‌
            align-content：控制多行子元素在交叉轴上的整体对齐

        还有一个justify-content,
        justify-content 是 CSS Flexbox（弹性盒子）布局中的一个核心属性，专门用于控制弹性容器内子元素在‌主轴方向‌上的对齐方式和空间分布
        主要功能：
            该属性决定了当弹性项目在主轴上的总尺寸小于容器尺寸时，剩余空间如何分配，以及项目如何在主轴上排列
            它只在使用 display: flex 或 display: inline-flex 的容器中起作用
        常用属性值：
            flex-start‌：               项目向主轴起点对齐（默认值）
            flex-end‌：                 项目向主轴终点对齐
            center‌：                   项目在主轴方向居中对齐
            space-between‌：            两端对齐，项目间间距相等
            space-around‌：             每个项目两侧间距相等
            space-evenly‌：             所有间距（包括两端）完全相等

    */
    align-items: center;
    /*
        CSS gap 属性是一个用于设置布局中行与列间距的简写属性
        ，它能够简化网格（Grid）布局、弹性盒子（Flexbox）布局以及多列（Multi-column）布局中元素间距的控制
        ‌语法格式‌：gap: <row-gap> <column-gap>;
            当只指定一个值时，行间距和列间距使用相同的值
            当指定两个值时，第一个值控制行间距，第二个值控制列间距
            默认值为 normal，表示没有额外的间距
    */
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px 15px 0 0;
}

.panel-header i {
    font-size: 1.6rem;
}

.panel-header span {
    font-size: 1.6rem;
    font-weight: 600;
}

.panel-content {
    padding: 25px;
}

.control-group {
    margin-bottom: 25px;
}

.control-group h3 {
    font-size: 1.5rem;
    color: #4a5568;
    margin-bottom: 15px;
}

/* 布局按钮 */
.layout-buttons {
    display: flex;
    gap: 10px;
}

.layout-btn {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    /*

    */
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.3rem;
    color: #4a5568;
}

.layout-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/*
    layout-btn:hover:not(.active)
    下面的 not(.active) 表示 这个悬停动作仅针对 非活跃的按钮
*/

.layout-btn:hover:not(.active) {
    background: #f7fafc;
    border-color: #cbd5e0;
}

/* 选择按钮 */
.image-selector {
    display: flex;
    gap: 10px;
}

.select-btn {
    flex: 1;
    padding: 12px 15px;
    border: none;
    background: #48bb78;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.3rem;
}

.select-btn:hover {
    background: #38a169;
    transform: translateY(-2px);
}

/* 效果控制 */
.effect-controls {
    display: flex;
    /*
       flex-direction 是 CSS Flexbox 布局中的一个核心属性，用于‌定义 Flex 容器内主轴的方向‌，即决定子元素（Flex 项目）的排列方向
          主要属性值:
            row (默认值)
                主轴为水平方向，从左到右排列
                子元素水平排列成一行
            row-reverse:
                主轴为水平方向，但从右到左排列
                子元素水平排列但顺序反转
            column
                主轴为垂直方向，从上到下排列
                子元素垂直排列成一列
            column-reverse
                主轴为垂直方向，但从下到上排列
                子元素垂直排列但顺序反转
    */
    flex-direction: column;
    gap: 15px;
}

.effect-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.effect-item label {
    font-size: 1.3rem;
    color: #718096;
}

.effect-item input[type="range"] {
    /*

    */
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
}

.effect-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
}

/* 交互效果 */
.main-image:hover {
    transform: scale(1.0);
    filter: brightness(1.1);
}

/* 响应式设计 */
/*@media screen and (max-width: 768px) {*/
    /*!**/
       /*当屏幕宽度 <= 768px时应用的样式*/
       /*这是一个CSS媒体查询，用于在屏幕宽度小于等于768px时（通常是手机等移动设备）调整网页布局：*/
            /*布局调整‌：*/
                /*.container 从水平排列改为垂直排列（flex-direction: column）*/
                /*左右部分宽度都变为100%视口宽度，高度分别为75%和25%视口高度*/
            /*控制面板适配‌：*/
                /*.control-panel 从绝对定位改为相对定位*/
                /*宽度调整为视口宽度减去40px，居中对齐*/
            /*组件优化‌：*/
                /*.layout-buttons 和 .image-selector 内部元素改为垂直排列*/
    /**!*/

    /*!*类似的代码还有*/
      /*body {font-size:16px}                                                     基础样式(所有设备)*/

      /*@media screen{ body { background : #f0f0f0; }}                            仅对屏幕设备生效*/

      /*@media screen and (max-width: 600px) { body { font-size: 14px; } }        屏幕宽度小于等于600px时生效*/
      /**!*/

    /*.container {*/
        /*flex-direction: column;*/
    /*}*/

    /*.right-section {*/
        /*width: 100vw;*/
        /*height: 75vh;*/
    /*}*/

    /*.right-section {*/
        /*width: 100vw;*/
        /*height: 25vh;*/
    /*}*/

    /*.control-panel {*/
        /*position: relative;*/
        /*width: calc(100vw - 40px);*/
        /*top: auto;*/
        /*right: auto;*/
        /*margin: 20px;*/
    /*}*/

    /*.layout-buttons,*/
    /*.image-selector {*/
        /*flex-direction: column;*/
    /*}*/
/*}*/

/* 深色模式支持 */
/*@media (prefers-color-scheme: dark) {*/

    /*!* @media (prefers-color-scheme: dark) - 检测用户操作系统或浏览器是否启用了深色主题*/
       /*当系统为深色模式时，自动应用内部的样式规则*/

       /*样式变化：*/
            /*.control-panel - 背景变为深蓝色半透明（rgba(45, 55, 72, 0.95)）*/
            /*.layout-btn - 按钮背景变深灰色，文字变浅色，边框为中灰色*/
            /*.layout-btn.active - 激活状态的按钮背景变为紫色*/
    /**!*/

    /*.control-panel {*/
        /*background: rgba(45, 55, 72, 0.95);*/
    /*}*/

    /*.layout-btn {*/
        /*background: #4a5568;*/
        /*color: #e2e8f0;*/
        /*border-color: #718096;*/
    /*}*/

    /*.layout-btn.active {*/
        /*background: #667eea;*/
    /*}*/
/*}*/